<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <el-row>
        <el-col :span="4" style="height: 60px;">
          <h3>Wiki页面</h3>
        </el-col>
        <el-col :span="20" style="height: 60px; margin-top:14px;">
          <el-button-group>
            <el-button size="mini" icon="el-icon-plus" type="primary" @click="createWiki">新增</el-button>
            <el-button size="mini" icon="el-icon-edit" type="warning" @click="editWiki(detail.slug)" />
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteWiki(detail.slug)" />
          </el-button-group>
          <el-dropdown style="float:right" :hide-on-click="false" trigger="click">
            <el-button type="primary" size="mini">
              克隆Wiki <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span style="font-weight:600">使用SSH克隆</span>：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="sshRepo" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="sshRepo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item><span style="font-weight:600">使用HTTPS克隆</span>：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="httpRepo" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="httpRepo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-model="data" v-loading="loadingTitle" :span="4">
          <el-card class="box-card">
            <ul style="padding-left: 0; padding-top: 0;">
              <li v-for="item in data" class="title">
                <el-link :underline="false">
                  <span v-if="currentView === item.slug" :title="item.slug" style="color: #66b1ff" @click="getDetail(item.slug)">{{ item.title }}</span>
                  <span v-else :title="item.slug" @click="getDetail(item.slug)">{{ item.title }}</span>
                </el-link>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col v-model="detail" v-loading="loadingContent" :span="20">
          <el-card class="box-card">
            <el-row :gutter="10">
              <el-col :span="6"><strong>{{ detail.title }}</strong></el-col>
              <el-col :span="6" :push="13">
              </el-col>
            </el-row>
            <el-divider />
            <el-row :gutter="10">
              <el-col :span="24">
                <vue-markdown :source="detail.content" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script>
    import GitNavigation from './components/GitNavigation'
    import VueMarkdown from 'vue-markdown'
    import { getData } from '@/api/requestData'

    export default {
        components: {
            GitNavigation,
            VueMarkdown
        },
        filters: {},
        data() {
            return {
                loadingTitle: true,
                loadingContent: true,
                pid: this.$route.params.pid,
                pname: this.$route.params.projectName,
                data: [],
                detail: {
                    title: undefined,
                    content: undefined,
                    slug: undefined,
                    format: 'markdown'
                },
                currentView: '',
                httpRepo: '',
                sshRepo: ''
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            onCopy(e) {
                // 复制成功
                this.$message.success('复制成功')
            },
            onError(e) {
                // 复制失败
                this.$message('复制失败')
            },
            fetchData() {
                getData('/git/public/wiki/list/' + this.pid).then((response) => {
                    this.loadingTitle = false
                    this.loadingContent = false
                    this.data = response.data.wiki
                    this.sshRepo = response.data.ssh
                    this.httpRepo = response.data.http
                    // 获取第一节的内容
                    const firstSlug = this.data[0].slug
                    this.currentView = this.data[0].slug
                    getData('/git/public/wiki/detail/' + this.pid + '?slug=' + firstSlug).then((res) => {
                        this.detail = res.data
                    })
                }).catch(() => {
                })
            },
            getDetail(slug) {
                this.loadingContent = true
                getData('/git/public/wiki/detail/' + this.pid + '?slug=' + slug).then((res) => {
                    this.detail = res.data
                    this.currentView = res.data.slug
                    this.loadingContent = false
                })
            },
            deleteWiki(slug) {
                this.$confirm('确定删除该流程?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getData('/git/delete/wiki/' + this.pid + '?slug=' + slug).then((response) => {
                        this.$message.success(response.message)
                        this.fetchData()
                    })
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            createWiki() {
                this.$prompt('页面标识串', '创建Wiki', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    inputPlaceholder: '您可以指定新文件的完整路径.'
                }).then(({ value }) => {
                    this.$router.push({ path: '/git/wiki/create/' + this.pname + '/' + this.pid + '?slug=' + value })
                }).catch(() => {
                   this.$message.info('取消创建Wiki')
                })
            },
            editWiki(slug) {
                this.$router.push({ path: '/git/wiki/edit/' + this.pname + '/' + this.pid + '?slug=' + slug })
            }
        }
    }
</script>

<style scoped>
  .title {
    height: 30px;
    width: 100%;
    line-height: 30px;
    list-style: none;
    display: block;
    text-align: left;
  }

  .title:hover {
    cursor: pointer;
  }
</style>
